<template>
	<div id="app" style="height:100%;">
		<div v-transfer-dom>
			<actionsheet :menus="menus" v-model="showMenu" @on-click-menu="changeMenu"></actionsheet>
		</div>
		<div v-transfer-dom>
			<loading v-model="isLoading"></loading>
		</div>
		<drawer width="200px;" :show.sync="showDrawer" :show-mode="'push'" :placement="'left'" :drawer-style="{'background-color':'#fbf9fe', width: '200px'}">
			<div slot="drawer">
				<group style="margin-top:20px;">
					<cell title="Icon" value="me" :link="{name:'me'}" @click.native="showDrawer = false">
					</cell>
					<cell title="UserInfo" value="Star me" :link="{name:'userInfo'}" @click.native="showDrawer = false">
					</cell>
				</group>
			</div>
			<view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
				<x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="leftOptions" :right-options="showHeaderRightOptions" :title="title" @on-click-more="onClickMore" v-show="showHeader" :transition="headerTransition">
					<span v-if="showDrawerIcon" slot="overwrite-left" @click="showDrawer = !showDrawer">
					 <x-icon type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
				</span>
				</x-header>
				<transition :name="viewTransition" :css="!!direction" @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
					<keep-alive>
						<router-view class="router-view"></router-view>
					</keep-alive>
				</transition>
				<tabbar slot="bottom" @on-index-change='onIndexChange' v-show="showTabbar">
					<tabbar-item :link="{path:'/Browse'}" :selected="isSelect(0)" badge="2">
						<div class="nav-browse" slot="icon">&#xe637;</div>
						<div slot="label">Browse</div>
					</tabbar-item>
					<tabbar-item :link="{path:'/connections'}" :selected="isSelect(1)" badge="5">
						<div class="nav-connections" slot="icon">&#xe633;</div>
						<div slot="label">Connections</div>
					</tabbar-item>
					<tabbar-item :link="{path:'/me'}" :selected="isSelect(2)" badge="9">
						<div class="nav-me" slot="icon">&#xe633;</div>
						<div slot="label">Me</div>
					</tabbar-item>
				</tabbar>
			</view-box>
		</drawer>
	</div>
</template>
<script>
import { XHeader, Group, Cell, Drawer, ViewBox, Tabbar, TabbarItem, Loading, Actionsheet, TransferDomDirective as TransferDom } from 'vux'
import { mapState, mapActions } from 'vuex'

export default {
	name: 'app',
	directives: {
		TransferDom
	},
	components: {
		XHeader,
		ViewBox,
		Tabbar,
		Drawer,
		TabbarItem,
		Actionsheet,
		Loading,
		Group,
		Cell,
	},
	watch: {
		'$route' (to, from) {
			this.showTabbar = this.isShowTabbar();
			this.showHeader = this.isShowHeader();
			this.showDrawerIcon = this.isShowDrawer();
			this.showHeaderRightOptions = { showMore: this.isRightOptions() };
		}
	},
	data() {
		return {
			showMenu: false,
			showHeader: false,
			showTabbar: false,
			showDrawer: false,
			showDrawerIcon: false,
			showHeaderRightOptions: { showMore: false },
			navIndex: 0,
			menus: {
				'type.noop': '<span class="menu-title">type</span>',
				'A': 'A Select',
				'B': 'B select'
			}
		}
	},
	computed: {
		...mapState({
			route: state => state.route,
			path: state => state.route.path,
			isLoading: state => state.vux.isLoading,
			direction: state => state.vux.direction
		}),
		isShowBar() {
			if (/component/.test(this.path)) {
				return true
			}
			return false
		},
		leftOptions() {
			return { showBack: this.route.path !== '/' }
		},
		headerTransition() {
			if (!this.direction) return ''
			return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
		},
		title() {
			if (this.route.meta.title) {
				return this.route.meta.title
			} else {
				return 'Home';
			}
		},
		viewTransition() {
			if (!this.direction) return ''
			return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
		}
	},
	methods: {
		onClickMore() { this.showMenu = true },
		changeMenu(e) { console.log('e', e); },
		onIndexChange(index) { this.navIndex = index; },
		isSelect(index) { if (index == this.navIndex) { return true; } },
		isRightOptions() {
			let bool = false;
			bool = /login|home/.test(this.route.name);
			return !bool;
		},
		isShowTabbar() {
			let bool = false;
			bool = /login|home/.test(this.route.name);
			return !bool;
		},
		isShowHeader() {
			let bool = false;
			bool = /home/.test(this.route.name);
			return !bool;
		},
		isShowDrawer() {
			let bool = false;
			bool = /browse|connections|me/.test(this.route.name);
			return bool;
		}
	},
}

</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
@import './styles/app.less';

</style>
